<template>
    <div class="inspection-index yuan-container">
        <a-card title="检验检测">
            <a-tabs type="card" :default-active-key="rawTypeKey" @change="tabChange">
                <a-tab-pane v-for="(item, i) in tabsData" :key="item.rawType" :tab="item.name"></a-tab-pane>
            </a-tabs>
            <div class="filter-panel">
                <a-input-search class="filter-list" allowClear v-model="keywords" placeholder="请输入关键词" @search="resetList" />
            </div>
            <div class="table">
                <a-table bordered :rowKey="getRowKey" :data-source="pageList" :columns="columns" :pagination="pagination"
                    :loading="loading">
                </a-table>
            </div>
        </a-card>
        <InspectionAdd :visible="addVisible" @closeModal="() => addVisible = false" :infoId="infoId" :rawType="rawTypeKey"
            @resetList="getList" />
        <InspectionDetail :visible="detailVisible" @closeModal="() => detailVisible = false" :infoId="infoId"
            :rawType="rawTypeKey" />
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { CheckoutListRes } from "@/api/nextApi";
import InspectionAdd from "./components/inspectionAdd.vue";
import InspectionDetail from "./components/inspectionDetail.vue";
import config from "@/utils/config";
@Component({
    name: "inspectionMgtIndex",
    components: { InspectionAdd, InspectionDetail },
})
export default class extends Vue {
    tabsData = config.tabsData;
    rawTypeKey = "中药材";
    keywords = "";
    loading = false;
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: CheckoutListRes[] = [];
    columns: any = [];
    defColumns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "名称",
        },
        {
            align: "center",
            dataIndex: "detectionBatch",
            key: "detectionBatch",
            title: "检品批次",
        },
        {
            align: "center",
            dataIndex: "reportTime",
            key: "reportTime",
            title: "报告日期",
        },
        {
            align: "center",
            dataIndex: "detectionState",
            key: "detectionState",
            title: "检验状态",
            customRender: (text: string, record: CheckoutListRes, index: number) => {
                const stateBox = h(
                    "div",
                    { class: record.detectionState === 0 ? "" : "c-success" },
                    record.detectionState === 0 ? "未检测" : "已检测"
                );
                return stateBox;
            },
        },
        {
            align: "center",
            dataIndex: "medicineClass",
            key: "medicineClass",
            title: "中药等级",
            customRender: (text, record, index) => `${record.medicineClass?record.medicineClass:'-'}`,
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 260,
            customRender: (text: string, record: CheckoutListRes, index: number) => {
                const detailBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "eye", type: "primary", size: "small" },
                        on: { click: () => this.showDetail(record) },
                    },
                    "查看"
                );
                const validBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "edit", type: "primary", size: "small" },
                        on: { click: () => this.clickAdd(record) },
                    },
                    "检测"
                );
                const btn: any[] = [];
                if (this.$utilCheckPermission(["testDetectionDetails"])) btn.push(detailBtn);
                if (this.$utilCheckPermission(["testDetectionDetection"])) btn.push(validBtn);
                return h("div", btn);
            },
        },
    ];

    getRowKey(item: any) {
        return item.id;
    }

    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getCheckoutList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                varietyName: this.keywords,
                rawType: this.rawTypeKey,
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    detailVisible = false;
    infoId = "";
    showDetail(item: CheckoutListRes) {
        this.infoId = item.id;
        this.detailVisible = true;
    }

    addVisible = false;

    clickAdd(item: CheckoutListRes) {
        this.infoId = item.id;
        this.addVisible = true;
    }

    tabChange(e: string) {
        this.columns = [...this.defColumns];
        this.rawTypeKey = e;
        console.log(e)
        if(e == "中药饮片" || e == "直服饮片" || e == "单方饮片"){
            this.columns.splice(3, 0, {
                align: "center",
                dataIndex: "discretion",
                key: "discretion",
                title: "装量",
            });
        }
        if (this.rawTypeKey === "成品") {
            this.columns.splice(4, 0, {
                align: "center",
                dataIndex: "secondBatch",
                key: "secondBatch",
                title: "亚批号",
            });
            this.columns.splice(4, 0, {
                align: "center",
                dataIndex: "advocateBatch",
                key: "advocateBatch",
                title: "主批号",
            });
        }
        this.resetList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;

        this.getList();
    }
    async mounted() {
        this.tabChange(this.rawTypeKey);
    }
}
</script>
<style lang="scss">
.inspection-index {
    padding: 20px;
}
</style>
